<template>
  <div class="customization-top">
    <div class="customization-alert">
       <button type="btn" class="customization-btn" @click="wapAdvEditer">编辑</button>
    </div>
    <div class="customization-top-min-banner">
      <img :src="adv.floorPhotoPath" alt="">
      <p v-if="adv.displayMode == 2" v-text="adv.floorName"></p>
    </div>
    <w-panel-fixed-wrap class="cb pop" v-model="show" title="配置楼层广告" width="1000px" height="500px" @on-confirm="closeWin" @on-cancel="hidePopup">
      <form id="addNewBanner" :action="url" method="POST" enctype="multipart/form-data">
        <div class="form-group form-inline">
          <w-label :must="false">是否展示</w-label>
          <w-radio name="isOpen" v-model="params.isOpen" label="0" :validate="false">是</w-radio>
          <w-radio name="isOpen" v-model="params.isOpen" label="1" :validate="false">否</w-radio>
          <span class="marl">设置否，则不在移动端展示此广告</span>
        </div>
        <div class="form-group form-inline">
          <w-label :must="false">上传图片</w-label>
          <!-- <w-button class="upload">上传<input type="file" name="floorPhotoId" @change="getImageRealPath($event.target)" accept="image/jpeg,image/gif,image/png"></w-button> -->
          <div class="upload">
            上传<input type="file" name="floorPhotoId" @change="getImageRealPath($event.target)" accept="image/jpeg,image/gif,image/png">
          </div>
          <img class="prev-image" :src="params.floorPhotoId" alt="">
        </div>
        <div class="form-group form-inline">
          <w-label :must="false">标题描述</w-label>
          <w-input :validate="false" name="floorName" v-model="params.floorName"></w-input>
        </div>
        <div class="form-group form-inline">
          <w-label :must="false">排序</w-label>
           <w-input name="sequence" rule="isEmpty|onlyInt" error="必填|只能为数字" v-model="params.sequence"></w-input>
        </div>
        <!-- 关联搜索组件 -->
        <associated-search :max="1" @on-input="getInputValue" @header="setNavigationType"></associated-search>
        <!-- 添加商品和已选商品选项框 -->
        <div class="add-exists-goods" v-show="!params.linkedProductType">
          <product-group :max="1" :goods="goodsList" :products="params.goodsList" v-model="params.goodsIdList"></product-group>
        </div>
        <!-- 隐藏字段 -->
        <div class="hidden">
          <input type="hidden" name="goodsIdList" :value="params.goodsIdList">
          <input type="hidden" name="accessToken" :value="params.accessToken">
          <input type="hidden" name="sequence" :value="params.sequence">
          <input type="hidden" name="floorType" value="adv3f">
          <input type="hidden" name="displayMode" :value="params.displayMode">
          <input type="hidden" name="id" :value="params.id">
          <input type="hidden" name="decorationType" value="WAP">
          <input type="hidden" name="linkedProductType" :value="params.linkedProductType">
          <input type="hidden" name="linkedProductUrl" :value="params.linkedProductUrl">
        </div>
      </form>
    </w-panel-fixed-wrap>
  </div>
</template>
<script>
// 商品组件
import productGroup from '../pc/productGroup'

// 关联商品搜索组件
import associatedSearch from '../pc/associatedSearch'

// 获取接口操作对象
import { apiAdornWAP } from '../../../common/api'

// 导入api
import { API } from '../../../common/config'

// 导入检验的js
import { validateFloorParam, inSelectedGoodsList } from '../validate'
import { getFileRealPath } from '../../../common/util'

export default {
  data() {
    return {
      show: false,
      goodsList: [],
      params: {
        accessToken: this.$store.getters.token,
        decorationType: 'WAP',
        sequence: 0,
        isOpen: 0,
        floorType: 'Banner',
        linkedProductType: 0,
        linkedProductUrl: '',
        displayMode: 2,
        goodsIdList: '',
        goodsList: [],
        floorName: '',
        floorPhotoId: '',
        isEdit: false
      }
    }
  },
  props: {
    adv: {
      type: Object,
      default: () => { return {} }
    }
  },
  computed: {
    url() {
      // 如果当前是修改状态
      if (this.params.isEdit) {
        return `${API}decoration/updateFloor`
      }
      // 当前是新增状态
      return `${API}decoration/addFloor`
    }
  },
  methods: {
    /**
     * 获取图片的真实路径
     */
    getImageRealPath(file) {
      this.params.floorPhotoId = getFileRealPath(file)
    },
    /**
     * 设置类型
     */
    setNavigationType(value) {
      this.params.linkedProductType = 1

      // 如果当前是商品
      if (value == 'goods') {
        this.params.linkedProductType = 0
      }
    },

    /**
     * 设置搜索关键字类型 goods: 按照商品搜索 link: 按照链接搜索
     *
     * @param { String } value 搜索的参数
     */
    getInputValue(value) {
      // 如果当前是商品
      if (value.type == 'link') {
        this.params.linkedProductType = 1
        this.params.linkedProductUrl = value.goodsLink
      }

      // 如果当前是按商品查询
      if (value.type == 'goods') {
        // 设置类型是链接
        this.params.linkedProductType = 0

        // 设置token
        value.accessToken = this.$store.getters.token

        // 先清空商品列表
        this.goodsList = []

        // 获取参数
        apiAdornWAP.searchGoodsByParams(value).then((data) => {
          // 如果没有获取到商品列表
          if (!data.list || data.list.length == 0) {
            return
          }

          // 遍历数据
          data.list.forEach((v) => {
            // 如果当前商品不在已选列表中
            if (!inSelectedGoodsList(v, this.params.goodsList)) {
              this.goodsList.push(v)
            }
          })
        })
      }
    },

    /**
     * 打开编辑或新增界面。如果当前没值，则新增，如果有值，则修改
     * @return {[type]} [description]
     */
    wapAdvEditer() {
      // 展示弹框
      this.show = true

      let goodsIds = []
      // 设置商品列表
      if (this.adv.goodsList) {
        this.adv.goodsList.forEach((v) => {
          goodsIds.push(v.goodsId)
        })
      }

      // 设置banner
      this.params = {
        id: this.adv.id,
        accessToken: this.$store.getters.token,
        decorationType: 'WAP',
        sequence: (this.adv.sequence || 0),
        isOpen: (this.adv.isOpen || 0),
        floorType: 'Banner',
        displayMode: (this.adv.displayMode || 2),
        goodsIdList: goodsIds.join(','),
        goodsList: this.adv.goodsList,
        linkedProductType: 0,
        linkedProductUrl: '',
        floorName: this.adv.displayMode == 1 ? '' : this.adv.floorName,
        floorPhotoId: this.adv.floorPhotoPath,
        isEdit: this.adv.id
      }
    },

    /**
     * 隐藏弹框
     */
    hidePopup() {
      this.goodsList = []
      this.show = false
    },

    /**
     * 展示弹框
     */
    showPopUp() {
      this.show = true
    },

    /**
     * 点击了新增，或者修改banner的时候
     */
    closeWin() {
      // 如果floorName不存在，则设置展示类型为1
      if (!this.params.floorName) {
        this.params.displayMode = 1
        $('input[name=displayMode]').val(1)
      } else {
        this.params.displayMode = 2
        $('input[name=displayMode]').val(2)
      }

      // 商品没选，则提示
      if (!validateFloorParam(this.params, false)) {
        return
      }

      this.$emit('add', this.hidePopup)
    }
  },
  components: {
    productGroup,
    associatedSearch
  }
}
</script>
<style lang="scss" scoped>
  p {
    font-size: 30px;
    padding: 20px 0;
  }
  .upload {
    position: relative;
    overflow: hidden;
    width: 90px;
    height: 30px;
    line-height: 26px;
    background-color: #47bdf4;
    color: #FFFFFF;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    border-radius: 4px;
    cursor: pointer;

    input[type=file] {
      cursor: pointer;
      position: absolute;
      opacity: 0;
      width: 1000px;
      height: 1000px;
      top: 0px;
      left: 0px;
    }
  }
  .prev-image {
    display: inline-block;
    width: auto;
    height: 30px;
    margin-bottom: -10px;
  }

  .w-input {
    display: inline-block;
    margin-right: 24px;
    width: 230px;
  }
  .control-label {
    width: 86px;
    text-align: right;
    display: inline-block;
    margin-right: 40px;
  }
  .m-radio:nth-child(3) {
    margin-left: 30px;
  }
  .marl {
    margin-left: 133px;
    display: inline-block;
  }
  .customization-top {
    width: 100%;
    padding: 10px 30px;
    background-color: #fff;
    position: relative;
    margin-top: 10px;

    &:hover {
      .customization-alert {
        display: block;
      }
    }
    .customization-alert {
      display: none;
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(222,175,200,0.5);
      left: 0;
      top: 0;
      padding: 20px 10px;
      .customization-btn {
        width: 120px;
        height: 40px;
        background-color: #f20685;
        color: #fff;
        font-size: 16px;
        border-radius: 5px;
        float: right;
      }
    }
    .customization-top-banner {
      width: 100%;
      height: 300px;
      background-color: #ccc;
    }
    .customization-top-min-banner {
      img {
        background-color: #ccc;
        display: inline-block;
        height: 640px;
        width: 690px;
      }
    }
  }
</style>